import lottie from 'lottie-web';
import animateJson from '../assets/lottie-animate/cloud.json';

// 默认渲染配置
const defaultRenderSetting = {
	preserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio property
	title: '', // Adds SVG title element for accessible animation title
	description: '', // Adds SVG desc element for accessible long description of animation
	clearCanvas: false,
	progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
	hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
	className: '',
	id: 'cloud-web',
};

export class CloudWeb {
	constructor({
		animateName,
		loop,
		autoplay,
		renderer,
		speed,
		container,
		rendererSettings,
		onComplete = () => { },
		onLoopComplete = () => { },
		onEnterFrame = () => { },
		onSegmentStart = () => { }
	}) {
		if (!container || !(container instanceof HTMLElement)) {
			throw new Error('contanier is NOT vaild DOMElement.');
		}

		this.__env__ = '';
		this.__buildDate__ = '';
		this.direction = 1;

		this.animate = lottie.loadAnimation({
			name: animateName || 'cloud-web',
			animationData: animateJson,
			loop: loop || false,
			autoplay: autoplay || false,
			renderer: renderer || 'svg',
			speed: speed || 1,
			container: container,
			rendererSettings: rendererSettings || defaultRenderSetting
		});

		// 停在最后一帧
		const totalFrames = this.animate.totalFrames;

		this.animate.goToAndStop(totalFrames, true);

		// 注册事件
		this.animate.addEventListener('complete', (res) => {
			onComplete(Object.assign(res, {
				direction: this.direction
			}));
		});

		this.animate.addEventListener('loopComplete', (res) => {
			onLoopComplete(Object.assign(res, {
				direction: this.direction
			}));
		});

		this.animate.addEventListener('enterFrame', (res) => {
			onEnterFrame(Object.assign(res, {
				direction: this.direction
			}));
		});

		this.animate.addEventListener('segmentStart', (res) => {
			onSegmentStart(Object.assign(res, {
				direction: this.direction
			}));
		});
	}

	// 获取lottie动画实例对象
	geAnimateObject() {
		return this.animate;
	}

	play(direction = 1) {
		if (direction === 1) {
			this.direction = 1;
			const totalFrames = this.animate.totalFrames;

			this.animate.goToAndStop(totalFrames, true);
			this.animate.setDirection(-1);
			this.animate.play(); // 开始播放
		} else if (direction === -1) {
			// 云散
			this.direction = -1;
			this.animate.goToAndStop(0, true);
			this.animate.setDirection(1);
			this.animate.play(); // 开始播放
		} else {
			throw new Error('direction is NOT vaild value, expect 1 or -1');
		}
	}

	// 暂停
	pause() {
		this.animate.pause();
	}

	// 销毁
	destory() {
		this.direction = 1;
		this.animate.destroy();
	}

	// 设置速度
	setSpeed(val) {
		this.animate.setSpeed(val);
	}

	// 重置速度
	resetSpeed() {
		this.animate.setSpeed(1);
	}

	// resize
	resize(width, height) {
		this.animate.resize(width, height);
	}
}